<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_util": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_util": "active",
      "util_flex": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">Utilities</a></li>
              <li class="breadcrumb-item active" aria-current="page">Flex</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              
              <h1 class="td-title">Flex</h1>
        <p class="td-lead">Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Enable Flex</h4>
        <p class="mg-b-30">Apply display utilities to create a flexbox container and transform direct children elements into flex items.</p>

        <div data-label="Example" class="td-example">
          <div class="d-flex pd-10 bg-gray-200">I'm a flexbox container!</div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;d-flex pd-10 bg-gray-200&quot;&gt;I&apos;m a flexbox container!&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section2" class="mg-b-10">Direction</h4>
        <p class="mg-b-30">Set the direction of flex items in a flex container with direction utilities.</p>

        <div data-label="Example" class="td-example">
          <div class="d-flex flex-row bg-gray-200 mg-b-20">
            <div class="pd-10 bg-gray-300">Flex item 1</div>
            <div class="pd-10 bg-gray-400">Flex item 2</div>
            <div class="pd-10 bg-gray-500">Flex item 3</div>
          </div>
          <div class="d-flex flex-row-reverse bg-gray-200">
            <div class="pd-10 bg-gray-300">Flex item 1</div>
            <div class="pd-10 bg-gray-400">Flex item 2</div>
            <div class="pd-10 bg-gray-500">Flex item 3</div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;d-flex flex-row bg-gray-200 mg-b-20&quot;&gt;
  &lt;div class=&quot;pd-10 bg-gray-300&quot;&gt;Flex item 1&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-400&quot;&gt;Flex item 2&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-500&quot;&gt;Flex item 3&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;d-flex flex-row-reverse bg-gray-200&quot;&gt;
  &lt;div class=&quot;pd-10 bg-gray-300&quot;&gt;Flex item 1&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-400&quot;&gt;Flex item 2&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-500&quot;&gt;Flex item 3&lt;/div&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section3" class="mg-b-10">Justify Content</h4>
        <p class="mg-b-30">Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis</p>

        <div data-label="Example" class="td-example">
          <div class="d-flex flex-row justify-content-start bg-gray-200 mg-b-20">
            <div class="pd-10 bg-gray-300">Flex item 1</div>
            <div class="pd-10 bg-gray-400">Flex item 2</div>
            <div class="pd-10 bg-gray-500">Flex item 3</div>
          </div>
          <div class="d-flex flex-row justify-content-end bg-gray-200 mg-b-20">
            <div class="pd-10 bg-gray-300">Flex item 1</div>
            <div class="pd-10 bg-gray-400">Flex item 2</div>
            <div class="pd-10 bg-gray-500">Flex item 3</div>
          </div>
          <div class="d-flex flex-row justify-content-center bg-gray-200 mg-b-20">
            <div class="pd-10 bg-gray-300">Flex item 1</div>
            <div class="pd-10 bg-gray-400">Flex item 2</div>
            <div class="pd-10 bg-gray-500">Flex item 3</div>
          </div>
          <div class="d-flex flex-row justify-content-between bg-gray-200 mg-b-20">
            <div class="pd-10 bg-gray-300">Flex item 1</div>
            <div class="pd-10 bg-gray-400">Flex item 2</div>
            <div class="pd-10 bg-gray-500">Flex item 3</div>
          </div>
          <div class="d-flex flex-row justify-content-around bg-gray-200">
            <div class="pd-10 bg-gray-300">Flex item 1</div>
            <div class="pd-10 bg-gray-400">Flex item 2</div>
            <div class="pd-10 bg-gray-500">Flex item 3</div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;d-flex justify-content-start&quot;&gt;...&lt;/div&gt;
&lt;div class=&quot;d-flex justify-content-end&quot;&gt;...&lt;/div&gt;
&lt;div class=&quot;d-flex justify-content-center&quot;&gt;...&lt;/div&gt;
&lt;div class=&quot;d-flex justify-content-between&quot;&gt;...&lt;/div&gt;
&lt;div class=&quot;d-flex justify-content-around&quot;&gt;...&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section4" class="mg-b-10">Align Items</h4>
        <p class="mg-b-30">Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis</p>

        <div data-label="Example" class="td-example">
          <div class="d-flex flex-row align-items-start bg-gray-200 ht-100 mg-b-20">
            <div class="pd-10 bg-gray-300">Flex item 1</div>
            <div class="pd-10 bg-gray-400">Flex item 2</div>
            <div class="pd-10 bg-gray-500">Flex item 3</div>
          </div>

          <div class="d-flex flex-row align-items-center bg-gray-200 ht-100 mg-b-20">
            <div class="pd-10 bg-gray-300">Flex item 1</div>
            <div class="pd-10 bg-gray-400">Flex item 2</div>
            <div class="pd-10 bg-gray-500">Flex item 3</div>
          </div>

          <div class="d-flex flex-row align-items-end bg-gray-200 ht-100 mg-b-20">
            <div class="pd-10 bg-gray-300">Flex item 1</div>
            <div class="pd-10 bg-gray-400">Flex item 2</div>
            <div class="pd-10 bg-gray-500">Flex item 3</div>
          </div>

          <div class="d-flex flex-row align-items-stretch bg-gray-200 ht-100">
            <div class="pd-10 bg-gray-300">Flex item 1</div>
            <div class="pd-10 bg-gray-400">Flex item 2</div>
            <div class="pd-10 bg-gray-500">Flex item 3</div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;d-flex align-items-start&quot;&gt;...&lt;/div&gt;
&lt;div class=&quot;d-flex align-items-center&quot;&gt;...&lt;/div&gt;
&lt;div class=&quot;d-flex align-items-end&quot;&gt;...&lt;/div&gt;
&lt;div class=&quot;d-flex align-items-stretch&quot;&gt;...&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section5" class="mg-b-10">Align Self</h4>
        <p class="mg-b-30">Use align-self utilities on flexbox items to individually change their alignment on the cross axis</p>

        <div data-label="Example" class="td-example">
          <div class="d-flex flex-row bg-gray-200 ht-100 mg-b-20">
            <div class="pd-10 bg-gray-300 align-self-start">Flex item 1</div>
            <div class="pd-10 bg-gray-400 align-self-center">Flex item 2</div>
            <div class="pd-10 bg-gray-500 align-self-end">Flex item 3</div>
            <div class="pd-10 bg-gray-400 align-self-stretch">Flex item 4</div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;d-flex flex-row bg-gray-200 ht-100 mg-b-20&quot;&gt;
  &lt;div class=&quot;pd-10 bg-gray-300 align-self-start&quot;&gt;Flex item 1&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-400 align-self-center&quot;&gt;Flex item 2&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-500 align-self-end&quot;&gt;Flex item 3&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-400 align-self-stretch&quot;&gt;Flex item 4&lt;/div&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section6" class="mg-b-10">Fill</h4>
        <p class="mg-b-30">Use the <code>.flex-fill</code> class on a series of sibling elements to force them into widths equal to their content</p>

        <div data-label="Example" class="td-example">
          <div class="d-flex bg-gray-200">
            <div class="pd-10 bg-gray-300 flex-fill">Flex item with a lot of content</div>
            <div class="pd-10 bg-gray-400 flex-fill">Flex item</div>
            <div class="pd-10 bg-gray-500 flex-fill">Flex item</div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;d-flex bg-gray-200&quot;&gt;
  &lt;div class=&quot;pd-10 bg-gray-300 flex-fill&quot;&gt;Flex item with a lot of content&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-400 flex-fill&quot;&gt;Flex item&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-500 flex-fill&quot;&gt;Flex item&lt;/div&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h5 id="section7" class="mg-b-10">Grow &amp; Shrink</h5>
        <p class="mg-b-30">Use <code>.flex-grow</code> utilities to toggle a flex item’s ability to grow to fill available space.</p>

        <div data-label="Example" class="td-example">
          <div class="d-flex bg-gray-200">
            <div class="pd-10 bg-gray-300 flex-grow-1">Flex item</div>
            <div class="pd-10 bg-gray-400">Flex item</div>
            <div class="pd-10 bg-gray-500">Third flex item</div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;d-flex bg-gray-200&quot;&gt;
  &lt;div class=&quot;pd-10 bg-gray-300 flex-grow-1&quot;&gt;Flex item&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-400&quot;&gt;Flex item&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-500&quot;&gt;Third flex item&lt;/div&gt;
&lt;/div&gt;</code></pre>


        <hr class="mg-t-50 mg-b-40">

        <h4 id="section8" class="mg-b-10">Auto Margins</h4>
        <p class="mg-b-30">Flexbox can do some pretty awesome things when you mix flex alignments with auto margins.</p>

        <div data-label="Example" class="td-example">
          <div class="d-flex bg-gray-200">
            <div class="pd-10 bg-gray-300">Flex item</div>
            <div class="pd-10 bg-gray-400">Flex item</div>
            <div class="pd-10 bg-gray-500 mg-l-auto">Third flex item</div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;d-flex bg-gray-200&quot;&gt;
  &lt;div class=&quot;pd-10 bg-gray-300 flex-grow-1&quot;&gt;Flex item&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-400&quot;&gt;Flex item&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-500 mg-l-auto&quot;&gt;Third flex item&lt;/div&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section9" class="mg-b-10">Order</h4>
        <p class="mg-b-30">Change the visual order of specific flex items with a handful of order utilities.</p>

        <div data-label="Example" class="td-example">
          <div class="d-flex bg-gray-200">
            <div class="pd-10 bg-gray-300 order-3">First Item</div>
            <div class="pd-10 bg-gray-400 order-2">Second Item</div>
            <div class="pd-10 bg-gray-500 order-1">Third Item</div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;d-flex bg-gray-200&quot;&gt;
  &lt;div class=&quot;pd-10 bg-gray-300 order-3&quot;&gt;First Item&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-400 order-2&quot;&gt;Second Item&lt;/div&gt;
  &lt;div class=&quot;pd-10 bg-gray-500 order-1&quot;&gt;Third Item&lt;/div&gt;
&lt;/div&gt;</code></pre>
@@include('./footer.html',{})

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Enable Flex</a>
            <a href="#section2" class="nav-link">Direction</a>
            <a href="#section3" class="nav-link">Justify Content</a>
            <a href="#section4" class="nav-link">Align Items</a>
            <a href="#section5" class="nav-link">Align Self</a>
            <a href="#section6" class="nav-link">Fill</a>
            <a href="#section7" class="nav-link">Grow &amp; Shrink</a>
            <a href="#section8" class="nav-link">Auto Margins</a>
            <a href="#section9" class="nav-link">Order</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->

    @@include('./_script.html',{})
    <script>
      $(function(){
        'use strict'
      });
    </script>
  </body>
</html>
